import React from "react";
import styled from "styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import PropTypes from "prop-types";

// 自定义p标签
const BtnP = styled.p.attrs({
  className: "btn"
})`
  span {
    margin-left: .22rem;
  }
`;

ButtonItem.propTypes = {
  title: PropTypes.string,
  btnClick: PropTypes.func,
  icon: PropTypes.object,
};

export default function ButtonItem({ title, btnClick, icon }) {
  return (
    <BtnP onClick={btnClick}>
      <FontAwesomeIcon icon={icon} />
      <span>{ title }</span>
    </BtnP>
  );
};